<template>
    <div class="activity">
        <p>{{data.rec_mod}}</p><p>{{data.update_time}}</p>
        <van-image @click="toDetail" fit="cover" lazy-load class="img" :src="'/uploads/' + data.thumb">
          <template v-slot:error>
            <van-icon name="smile-o" size="80" />
          </template>
        </van-image>
        <div class="show-detail">
            <span>{{data.rec_name}}</span>
            <span>{{data.hits}}views</span>
        </div>
        <van-dialog
          v-model="show"
          :title="data.rec_name">
          <div class="content">
            <van-image :src="'/uploads/' + data.thumb" fit="cover">
              <template v-slot:error>
                <van-icon name="smile-o" size="80" />
              </template>
            </van-image>
            <span>分类: {{data.rec_mod == 'master' ? '大师详情':'活动详情'}}</span><br>
            <span>上次更新时间: {{data.update_time}}</span><br>
            <span>查看人数{{data.hits}}人</span>
            <van-tag type="danger">{{data.checkstate == '1' ? '热门':'推荐'}}</van-tag>
          </div>
        </van-dialog>
    </div>
</template>

<script>
export default {
  name: 'activity',
  props: {
    data: Object
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    toDetail () {
    //   this.$root.$router.push('/homedetail')
      this.show = true
    }
  }
}
</script>

<style scoped>
    .activity{
        height: 17rem;
        border-radius: 5px;
        padding: 0.5rem;
        border-top: 1px solid #aaa;
        overflow: hidden;
    }

    .activity>.img{
        height: 100%;
        width: 100%;
        border-radius: 5px;
        mix-blend-mode:multiply;
    }

    p{
        padding: 0;
        margin: 0;
        color: #555;
        font-weight: 500;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        width: 50%;
        float: left;
    }
    p:last-of-type{
        text-align: right;
        font-size: 0.8rem;
    }
    .show-detail{
        width: 100%;
        position: relative;
        background-color: rgba(90, 84, 84, 0.719);
        height: 3rem;
        bottom: 3.5rem;
        overflow: hidden;
    }
    .show-detail>span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(223, 223, 223);
        line-height: 2.2rem;
        padding-left: 5px;
    }
    .show-detail>span:last-of-type{
        position: absolute;
        right: 5px;
        text-align: right;
    }
    .van-dialog .van-image{
        height: 15rem;
        width: 100%;
    }
    .content>span{
        margin-left: 0.5rem;
        line-height: 1.8rem;
    }
    .content>span:last-of-type{
      line-height: 0.9rem;
    }
</style>
